<template>
    <div class="tabledata">
        <el-table :data="tableData" style="width: 100%" height="85%"
        highlight-current-row :show-header="false" ><!-- :show-header="false" -->
            <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">
                    <div class="tablediv">
                        <div class="journalism_content">
                            {{scope.row.name}}
                        </div>
                        <div class="journalism_date">
                            <div class="vertical"></div>
                            <div>
                                <div>{{scope.row.date}}</div>
                                <div>{{scope.row.day}}</div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            
            @current-change="handleCurrentChange"
            layout=" pager"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:[
                {date:'1/12',day:2022,name:'沿海公司顺利召开工会会员代表大会'},
                {date:'1/12',day:2022,name:'沿海公司顺利召开工会会员代表大会'},
                {date:'1/12',day:2022,name:'沿海公司顺利召开工会会员代表大会'},
                {date:'1/12',day:2022,name:'沿海公司顺利召开工会会员代表大会'},
                {date:'1/12',day:2022,name:'沿海公司顺利召开工会会员代表大会'}
            ],
            fom:{
                pageSize:7, //每页七条 不变
                pageNumber:1,//当前页
            }
        }
    },
    created(){
       // this.queryTable()
    },
    methods:{
        handleCurrentChange(val){
            console.log('222',val)//分页
            this.fom.pageNumber = val

            //this.queryTable() //huixian
        }
    }
}
</script>

<style scoped>
.journalism_content{
    width:90%;
    height: 100%;
    display: flex;
    align-items: center;
}
.journalism_date{
    width:10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tabledata{
    width: 100%;
    height: 100%;
}
.tablediv{
    width: 100%;
    height: 40px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
>>> .el-table .el-table__cell {
    padding: 0px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    font-size: 11px;
}
.contday{
    width: 60%;
    height: 100%;
    margin-left: 10px;
    font-size: 11px !important;
    display: flex;
    color: #CDCDCD;
    flex-wrap: wrap;
}
.vertical{
    height: 80%;
    width: 2px;
    background: #CDCDCD;
    margin-left: 50px;
}

    >>> .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 3px;
    }

    >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #fff;
        border: 1px solid #24ADF3;
        color: #24ADF3;
    }

    >>> .el-pagination.is-background .el-pager li {
        margin: 0 5px;
        background-color: #fff;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
        border: 1px solid #EDF2F7;
    }


    /* 上面是 设置分页 背景 下面是 鼠标点击table变色 */

    >>> .el-table__body tr.current-row>td{
        /* background-color: #EDF2F7 !important; */
        background: linear-gradient(to right, #F9FBFC 0%, #d4e5f6 50%, #F9FBFC 100%) !important;
        color: #6179B1;  /* 设置文字颜色，可以选择不设置 */
    }
    /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
    >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #EDF2F7;
        /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
    }
    >>> .el-pagination {
        margin-top: 15px;
        white-space: nowrap;
        padding: 2px 5px;
        color: #303133;
        font-weight: 700;
        display: flex;
        justify-content: center;
    }

    /*     .el-table td.el-table__cell div {
        box-sizing: border-box;
        border-bottom: 0.1px solid red;
        border-top:none
    } */
</style>